<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-23 09:29:46
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-28 11:47:23
 * @FilePath: \cxl-h5\src\components\Submit.vue
-->
<template>
    <section class="submit-container">
        <img src="../assets/images/finish.svg" alt="" />
        <h1>提交成功</h1>
        <p>{{ text }}</p>
        <section class="submit">
            <cxl-button type="primary" round @click.self="goBack">返回首页</cxl-button>
        </section>
        <slot name="content"></slot>
    </section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
// import router from '@/router'

const router = useRouter()
const props = defineProps(['text'])

const text = ref('')

watchEffect(() => {
    text.value = props.text
})

//返回上一页
const goBack = () => {
    // router.go(-1)
    router.replace('/index')
}
</script>
<style scoped lang="scss">
.submit-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    padding: 0 var(--cxl-size-16);
    text-align: center;

    img {
        display: block;
        width: 8.3rem;
        height: 8.3rem;
        margin: 5rem auto var(--cxl-size-30) auto;
    }
    h1 {
        font-size: var(--cxl-size-18);
        color: var(--cxl-color-333333);
    }
    p {
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-999999);
        margin: var(--cxl-size-10) 0 var(--cxl-size-20) 0;
    }
    .submit {
        box-sizing: border-box;
        padding: 0 var(--cxl-size-45);
    }
    .detailed {
        font-size: var(--cxl-size-16);
        color: var(--cxl-color-primary);
        margin-top: var(--cxl-size-20);
        display: block;
    }
}
</style>
